<template>
    <div class="amap-page-container map-zoom" :style="{'height':mapHeight}">
        <el-amap vid="map-dispatch" :zoom="zoom" :mapStyle="mapStyle" :amap-manager="amapManager" :center="center" :plugin="plugin">
            <!--包裹-->
                <el-amap-marker
                        v-for="(marker,index) in mapData.orderData.markers"
                        :position="marker.position"
                        :template="marker.template"
                        :events="marker.events">
                    <img src="../../../../../assets/img/weiqu@2x.png" style="z-index: 5" v-if="marker.type===10" class="point" @click="getPointOrLine(marker.id)">
                    <img src="../../../../../assets/img/Group15Copy@2x.png" v-else-if="marker.type===9" class="receipt-img">
                    <img src="../../../../../assets/img/loding@2x.png" style="z-index: 5" v-else-if="marker.type==='bag'" class="point" @click="getPointOrLine(marker.id)">
                    <!--<span v-else-if="marker.type === 'driver' " :class="['driver-name',{'show-driver':marker.checked===true}]">{{marker.name}}</span>-->
                    <img src="../../../../../assets/img/jinji@2x.png" v-else-if="!marker.template" class="point" @click="getPointOrLine(marker.id)">
                    <span v-if="(!marker.status&&marker.type!=='driver')" class="same-point">x{{(marker.sameMark&&marker.sameMark.length>0)?marker.sameMark.length+1:1}}</span>
                </el-amap-marker>
            <!--包裹-->
            <!--司机marker-->
                <el-amap-marker
                        v-if="isShowDriver"
                        v-for="(marker,index) in driversData"
                        :vid="marker.id"
                        :position="[marker.lon, marker.lat]">
                    <img v-if="marker.current_position && (marker.nowTime - marker.current_position.updated_at_timestamp * 1000) > (5 * 60 * 1000) "
                         src="../../../../../assets/img/redcar@3x.png" alt="" class="driver-img"
                         :style="{transform: 'rotate(' + marker.way + 'deg)'}"
                         @click="checkDriver(marker.id,marker.name,true,[marker.lon, marker.lat])">
                    <img v-else
                         src="../../../../../assets/img/car.png" alt="" class="driver-img"
                         :style="{transform: 'rotate(' + marker.way + 'deg)'}"
                         @click="checkDriver(marker.id,marker.name,true,[marker.lon, marker.lat])">
                    <!--<div :class='(marker.nowTime - marker.updated_at_timestamp * 1000) > (60*30) ? `driver-n driver-red` : `driver-n`'>{{marker.name}}</div>-->
                    <div class="driver-n">{{marker.name}}</div>
                </el-amap-marker>
            <!--司机marker-->
            <!--接驳点-->
                <template v-for="(marker, index) in siteMarkers" v-if="isShowSite">
                    <el-amap-marker
                            :vid="marker.id"
                            :position="marker.position"
                            :events="marker.events"
                            :visible="marker.visible"
                            :draggable="marker.draggable">
                        <img src="../../../../../assets/img/jiebodiadddddn@3x.png" alt="" class="marker-img">
                        <div class="marker-name">{{marker.name}}</div>
                    </el-amap-marker>
                </template>
            <!--接驳点-->
            <!--包裹终点-->
                <el-amap-marker
                    v-for="(marker,index) in mapData.driverData.taskEndLngLat"
                    :position="marker.position">
                    <img src="../../../../../assets/img/driver_rec.png" alt="" class="marker-img" v-if="marker.rec_order > 0 && marker.send_order === 0">
                    <img src="../../../../../assets/img/driver_rec_send.png" alt="" class="marker-img" v-if="marker.rec_order > 0 && marker.send_order > 0">
                    <img src="../../../../../assets/img/driver_send.png" alt="" class="marker-img" v-if="marker.rec_order === 0 && marker.send_order > 0">
                </el-amap-marker>
            <!--包裹终点-->
                <el-amap-polyline
                        v-for="(line,index) in polyLines.path"
                        :path="line.path"
                        strokeColor="red"
                        strokeWeight=2
                        strokeStyle="dashed">
                </el-amap-polyline>
            <!--司机对应任务-->
                <!--<template v-for="(polys,index) in mapData.driverData.flagTaskPoly">-->
                    <!--<el-amap-bezier-curve-->
                        <!--v-for="(line,index) in polys"-->
                        <!--:path="line.path"-->
                        <!--:strokeColor="line.strokeColor"-->
                        <!--:strokeWeight="line.strokeWeight"-->
                        <!--:strokeStyle="line.strokeStyle">-->
                    <!--</el-amap-bezier-curve>-->
                <!--</template>-->
                <el-amap-polyline
                        :path="mapData.driverData.flagTaskPoly.path"
                        strokeColor="rgba(64,158,255,0.8)"
                        strokeWeight=2
                        strokeStyle="solid">
                </el-amap-polyline>
            <!--司机对应任务-->
            <!--司机当前任务连线-->
            <!--当前任务终点-->
                <!--<el-amap-marker-->
                        <!--v-if="isShowDriverTaskPosition"-->
                        <!--v-for="(marker,index) in mapData.driverData.taskNowEndLngLat"-->
                        <!--:events="marker.events"-->
                        <!--:position="marker.path">-->
                    <!--<img src="../../../../assets/img/renwu@3x.png" alt="" class="marker-img" style="width: 20px;top: 8px;left: -1px;">-->
                    <!--<div class="marker_name-driver">{{marker.driverName}}</div>-->
                <!--</el-amap-marker>-->
            <!--当前任务终点-->
                <!--<el-amap-polyline-->
                        <!--v-if="isShowDriverTaskPosition"-->
                        <!--v-for="(item,index) in mapData.driverData.driverNowTask"-->
                        <!--:key="index"-->
                        <!--strokeColor="rgba(64,158,255,0.8)"-->
                        <!--strokeWeight=2-->
                        <!--strokeStyle="solid"-->
                        <!--:path="item">-->
                <!--</el-amap-polyline>-->
            <!--司机当前任务连线-->
            <!--当前任务终点-->
            <el-amap-marker
                    v-for="(marker,index) in mapData.driverData.taskNowEndLngLatSingle"
                    :events="marker.events"
                    :position="marker.path">
                <img src="../../../../../assets/img/renwu@3x.png" alt="" class="marker-img" style="width: 20px;top: 8px;left: -1px;">
                <div class="marker_name-driver">{{marker.driverName}}</div>
            </el-amap-marker>
            <!--当前任务终点-->
            <el-amap-polyline
                    v-for="(item,index) in mapData.driverData.driverNowTaskSingle"
                    :key="index"
                    strokeColor="rgba(64,158,255,0.8)"
                    strokeWeight=2
                    strokeStyle="solid"
                    :path="item.path">
            </el-amap-polyline>
            <!--司机当前任务连线-->
            <!--区域-->
                <el-amap-polygon
                        v-if="isShowArea"
                        v-for="(polygon, index) in polygonsEdit"
                        :path="polygon.path"
                        :fillOpacity="polygon.fillOpacity"
                        :strokeOpacity="polygon.strokeOpacity"
                        :strokeColor="polygon.borderColor"
                        :fillColor="polygon.bgColor"
                        :draggable="polygon.draggable"
                        :editable="polygon.editable"
                        :events="polygon.events">
                </el-amap-polygon>
            <!--区域-->
        </el-amap>
        <div class="turectangle" id="turectangle">
            <div>
                <el-select v-model="mapStyle" size="mini" placeholder="请选择主题" style="width: 100px;zoom:0.9;border: 1px solid #D8DCE6;">
                    <el-option
                            v-for="item in themeData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                <el-button icon="el-icon-edit-outline" size="mini"  style="zoom: 1;width: 92px;height: 30px;margin-top: 4px" @click="mouseTool">框选运单</el-button>
            </div>
        </div>
        <div class="tuceng" id="controlList">
                <el-select v-model="mapData.driverData.isShowNowOrALLTask" size="mini" placeholder="请选择任务选项" style="width: 110px;zoom: 0.9;margin-top: 0px">
                    <el-option label="所有任务" value="2"></el-option>
                    <el-option label="当前任务" value="1"></el-option>
                    <el-option label="司机轨迹" value="3"></el-option>
                </el-select>
                <el-select v-model="mapData.driverData.driverFeet" size="mini" placeholder="请选择连队" style="width: 110px;zoom: 0.9;margin-top: 0px">
                    <el-option
                            v-for="item in mapData.driverData.cascaderOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div>
                    <el-button type="primary" style="width: 100px;" size="mini" @click="isShowDriver = !isShowDriver">{{isShowDriver?'关闭司机':'显示司机'}}</el-button>
                </div>
                <div>
                    <el-button type="primary" style="width: 100px;" size="mini" @click="isShowArea = !isShowArea">{{isShowArea?'关闭区域':'显示区域'}}</el-button>
                </div>
                <div>
                    <el-button type="primary" style="width: 100px;" size="mini" @click="isShowSite = !isShowSite">{{isShowSite?'关闭接驳点':'显示接驳点'}}</el-button>
                </div>

            </div>

    </div>
</template>

<script>
    import color from '../../../../../init/color.js';  // 颜色js
    import VueAMap from "vue-amap";
    import { lazyAMapApiLoaderInstance } from 'vue-amap';
    let amapManager = new VueAMap.AMapManager();
    export default {
        data() {
            return {
                mapStyle: 'amap://styles/whitesmoke',
                themeData: [
                    {
                        label: '标准',
                        value: 'amap://styles/normal'
                    },
                    {
                        label: '远山黛',
                        value: 'amap://styles/whitesmoke'
                    },
                    {
                        label: '幻影黑',
                        value: 'amap://styles/dark'
                    },
                    {
                        label: '月光银',
                        value: 'amap://styles/light'
                    },
                    {
                        label: '草色青',
                        value: 'amap://styles/fresh'
                    },
                    {
                        label: '雅士灰',
                        value: 'amap://styles/grey'
                    },
                    {
                        label: '涂鸦',
                        value: 'amap://styles/graffiti'
                    },
                    {
                        label: '马卡龙',
                        value: 'amap://styles/macaron'
                    },
                    {
                        label: '靛青蓝',
                        value: 'amap://styles/blue'
                    },
                    {
                        label: '极夜蓝',
                        value: 'amap://styles/darkblue'
                    },
                    {
                        label: '酱籽',
                        value: 'amap://styles/wine'
                    }
                ],
                amapManager:amapManager,
                mapFeet: null,
                siteMarkers: [], // 接驳点信息
                polygonsEdit: [], // 区域信息
                isShowSite: false,
                isShowArea: true,
                isShowDriverTaskPosition: false,  // 司机当前任务显示连线
                isShowDriver: true,
                zoom: 10,
                center: [],
                polyLines: {   // 任务对应连线
                    path: [],
                    editable: false
                },
                time: null,
                poly: [], // 司机对应任务连线
                plugin: [{
                    pName: 'MapType',
                    defaultType: 0,
                    events: {
                        init(instance) {
                        }
                    }
                }],
                isEditKey: null,  // 是否选中
                driving: null,
                mouseTools: null,
                mapData: {} // 传过来的地图所需参数(所有)
            };
        },
        props: {
            value: {
                type: Object
            },
            mapHeight: {
                type: String,
                default: '100%'
            }
        },
        computed: {
            driversData: function (val) {
                return this.mapData.driverData.driverList;
            }
        },
        watch: {
            value: {
                handler(val) {
                    this.mapData = this.value;
                    this.initArea();
                    this.initSite();
                },
                deep: true
            },
            mapData: {
                handler(val) {
                    this.$emit('input', this.mapData);
                },
                deep: true
            }
        },
        created() {
            this.center = JSON.parse(localStorage.getItem('lnglat'));
            this.mapData = this.value;
        },
        mounted() {
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            mouseTool() {
                const self = this;
                let map = amapManager.getMap();
                map.plugin(["AMap.MouseTool"],function(){
                    self.mouseTools = new AMap.MouseTool(map);
                    self.mouseTools.rectangle({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                    });
                    let overlays = [];
                    let lngLat = [];
                    self.mouseTools.on('draw',function(e){
                        overlays = e.obj;
                        console.info('overlays',overlays.getPath());
                        lngLat = overlays.getPath();
                        self.mapData.orderData.redrectLngLat = [[lngLat[0].lng, lngLat[0].lat],[lngLat[2].lng, lngLat[2].lat]];
                        self.mouseTools.close(true);
                    });

                });
            },
            initSite() {
                const self = this;
                self.siteMarkers = [];
                let spotList = self.mapData.spotData ? self.mapData.spotData.spotList : [];
                for (let key in spotList) {
                    self.siteMarkers.push({
                        position: [spotList[key].lon, spotList[key].lat],
                        events: {
                            click: () => {
                                self.$emit('openInfoDialog', {id: spotList[key].id, type: 'spot', openDialog: true})
                            }
                        },
                        name: spotList[key].name,
                        visible: true,
                        draggable: false
                    });
                }
            },
            initArea() {  // 初始化地图
                const self = this;
                self.polygonsEdit = [];
                let areaList = self.mapData.areaData ? self.mapData.areaData.areaList : [];
                for (let key in areaList) {
                    self.polygonsEdit.push({
                        editable: false,
                        id: areaList[key].id,
                        contentRender: areaList[key].name,
                        draggable: false,
                        fillOpacity: "0.1",
                        strokeOpacity: "0.2",
                        bgColor: color[key],
                        borderColor: color[key],
                        path: areaList[key].area ? JSON.parse(areaList[key].area) : [],
                        events: {
                            click: () => {
                                // if (!self.isEditKey) {
                                //     self.isEditKey = key
                                //     Vue.set(self.polygonsEdit[key], 'fillOpacity', '0.5');
                                //     Vue.set(self.polygonsEdit[key], 'strokeOpacity', '0.6');
                                // } else {
                                //     Vue.set(self.polygonsEdit[self.isEditKey], 'fillOpacity', '0.1');
                                //     Vue.set(self.polygonsEdit[self.isEditKey], 'strokeOpacity', '0.2');
                                //     self.isEditKey = null;
                                // }
                            }
                        }
                    });
                }
            },
            getPointOrLine(id) {
                this.$emit("getPointOrLine", id, true);
            },
            addLine(position, lastPositon, sendId) {
                let lineId = Date.now() - new Date("2018/01/01").getTime() + '' + sendId;
                let marker = {
                    position: lastPositon,
                    type: 9,
                    sendId: sendId,
                    id: lineId,
                    template: ""
                };
                let line = {
                    path: [position, marker.position],
                    id: lineId
                };
                this.mapData.orderData.markers.push(marker);
                this.polyLines.path.push(line);
            },
            removeLine(id) {
                let lineId;
                for (let i = 0, length = this.mapData.orderData.markers.length; i < length; i++) {
                    if (this.mapData.orderData.markers[i]['sendId'] === id) {
                        lineId = this.mapData.orderData.markers[i]['id'];
                        this.mapData.orderData.markers.splice(i, 1);
                        break;
                    }
                }
                for (let i = 0, length = this.polyLines.path.length; i < length; i++) {
                    if (this.polyLines.path[i]['id'] === lineId) {
                        this.polyLines.path.splice(i, 1);
                        break;
                    }
                }
            },
            clearLines() {
                this.polyLines.path = [];
            },
            checkDriver(driverId,driverName,isOpen,driverLngLat) {
                this.mapData.driverData.driverLonLat = driverLngLat;
                this.$emit('checkDriver',{driverId:driverId,driverName:driverName,driverLngLat:driverLngLat,isOpen:isOpen});
            }
        }
    };
</script>
<style lang="less" scoped>
    .amap-page-container {
        height: 100%;
        .marker-img {
            position: relative;
            width: 16px;
            top: 12px;
            left: 2px;
        }
        .marker_name-driver{
            position: absolute;
            width: 70px;
            top: -8px;
            left: -27px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: blue;
        }
        .marker-name {
            position: absolute;
            border: 1px solid #009688;
            color:rgba(0,0,0,0.8);
            font-size: 12px;
            border-radius: 4px;
            white-space: nowrap;
            background-color: #fff;
            padding: 0 2px;
            left: 18px;
            top: 16px;
        }
        .driver-img{
            width: 16px;
            position: relative;
            top: 16px;
        }
        .driver-red {
            color: red;
        }
        .driver-n {
            position: absolute;
            border: 1px solid rgba(0,0,0,0.2);
            color:rgba(0,0,0,1);
            font-size: 12px;
            border-radius: 4px;
            white-space: nowrap;
            background-color: rgba(255,255,255,0.3);
            padding: 0 1px;
            left: 20px;
            top: 18px;
        }
        .olor-red {
            color: red;
        }
        .point {
            cursor: pointer;
            position: absolute;
            z-index: 1000;
            left: 0px;
            top: 20px;
            background-color: #fff;
            width: 20px;
            height: 20px;
            overflow: hidden;
            border-radius: 20px;
        }
        .qizi {
            position: absolute;
            z-index: 5;
            left: 5px;
            top: 15px;
            width: 20px;
            height: 20px;
        }
        .same-point {
            font-size: 12px;
            font-weight: 600;
            color: #4A4A4A;
            letter-spacing: 0;
            display: block;
            position: absolute;
            top: 8px;
            left: -6px;
            width: 30px;
            text-align: center;
        }
        .mission-box {
            padding-bottom: 10px;
            transform: translateX(-45%);
            background: url(../../../../../assets/img/zhizhen@2x.png) no-repeat center bottom;
            background-size: 13px 7px;
            p {
                background-color: #3b8fe3;
                padding: 4px;
                border-radius: 4px;
                color: #fff;
                white-space: nowrap;
                font-size: 12px;
                span {
                    color: #3b8fe3;
                    background-color: #fff;
                    padding: 2px;
                    border-radius: 4px;
                }
            }
        }
        .receipt-img {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 0px;
            top: 20px;
        }
        .driver-name {
            font-size: 14px;
            width: 60px;
            padding-top: 2px;
            height: 40px;
            text-align: center;
            position: absolute;
            z-index: 99;
            left: -20px;
            top: 10px;
            background: url(../../../../../assets/img/Group7@3x.png) no-repeat center bottom;
            background-size: contain;
        }
        .show-driver {
            border: 2px dashed #008b7d;
            border-radius: 15px;
        }
    }
</style>
